<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>药品库存管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>

<!--查询参数的表单-->
<form class="layui-form layui-form-pane layui-margin-3">
    <div class="layui-form-item">

        <div class="layui-inline">
            <label class="layui-form-label">药品名称</label>
            <div class="layui-input-inline">
                <select name="name" id="name" lay-search>
                    <option value="">搜索或选择</option>
                    <option th:each="n : ${nameList}" th:value="${n}" th:text="${n}"></option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">国药准字</label>
            <div class="layui-input-inline">
                <select name="code" id="code" lay-search>
                    <option value="">搜索或选择</option>
                    <option th:each="c : ${codeList}" th:value="${c}" th:text="${c}"></option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <button class="layui-btn" lay-submit lay-filter="toDo">搜索药品</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<!--数据表格-->
<div class="layui-margin-3 layui-anim layui-anim-upbit">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>

<!--表格右下角分页栏按钮-->
<script type="text/html" id="my-page-bar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-primary layui-border-purple layui-btn-xs" lay-event="作者：张宏业">😀 操作提示：点击任意行即可查看当前药品的库存信息！</button>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script>

    layui.use(['table', 'form', 'layer'], function () {
        let table = layui.table;
        let form = layui.form;
        let layer = layui.layer;

        // 搜索按钮事件
        form.on('submit(toDo)', function (data) {
            let field = data.field; // 获取表单字段值

            table.reload('test', {  // 表格数据重载
                where: {
                    'name': field.name,
                    'code': field.code
                }
            });
            return false; // 阻止默认 form 跳转
        });

        // 创建渲染实例
        table.render({
            elem: '#test',
            url: '/getAllMedicineData',
            page: true,
            limit: 15,
            limits: [15, 30, 50],
            pagebar: '#my-page-bar', // 分页栏模板
            cols: [
                [
                    {field: 'id', title: '药品编号', hide: true},
                    {field: 'name', title: '药品名称'},
                    {field: 'code', title: '国药准字', templet: '<div><span class="layui-badge layui-bg-gray">{{= d.code }}</span></div>'},
                    {field: 'compose', title: '药品成分'},
                    {field: 'specs', title: '药品规格'},
                    {field: 'usage', title: '用法用量'},
                    {field: 'image', title: '药品照片', hide: true},
                    {field: 'origin', title: '生产厂家'}
                ]
            ],
            error: function (res, msg) {
                console.log(res, msg)
            }
        });

        // 底部分页栏事件
        table.on('pagebar(test)', function (obj) {
            var eventValue = obj.event; // 获得按钮 lay-event 值
            layer.msg(eventValue);
        });

        // 行单击事件
        table.on('row(test)', function (obj) {
            let data = obj.data; // 获得当前行数据
            layer.open({
                type: 2,
                title: '【' + data.name + ' ' + data.code + '】 的库存信息',
                area: ['800px', '600px'],
                shadeClose: true,
                scrollbar: false,
                content: ['/toStockData/' + data.id, 'no']
            });
        });
    });
</script>
</body>
</html>